<template>
	<view class="chat-container page-root" ref="page" @scroll="onScroll" :style="containerStyle">
		<!-- 使用picshow组件 -->
		<picshow :show="showImmersiveBackground"></picshow>
		
		<ai-chat ref="aiChat" :role-prompt="rolePrompt" @ai-message="handleAIMessage"
			@messages-updated="handleMessagesUpdated" @loading="handleLoading" @error="handleSSEError"></ai-chat>

		<!-- iOS 18 风格导航栏 -->
		<view class="ios18-navbar" :class="{ 'immersive-navbar': showImmersiveBackground }" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="navbar-left">
					<view class="nav-button" :class="{ 'immersive-button': showImmersiveBackground }" @click="goBack">
						<my-icon name="chevron-left" width="44rpx" height="44rpx" color="#ffffff" />
					</view>
				</view>
				<view class="navbar-center" @click="goToModelSelect">
					<view class="role-model-selector" :class="{ 'immersive-selector': showImmersiveBackground }">
						<text class="role-name">{{ roleName }}</text>
						<text class="model-name">({{ currentModelName }})</text>
					</view>
				</view>
				<view class="navbar-right">
					<view class="nav-button" :class="{ 'immersive-button': showImmersiveBackground }" @click="showGroupChatMenu">
						<my-icon name="more" width="44rpx" height="44rpx" color="#ffffff" />
					</view>
				</view>
			</view>
		</view>

		<!-- 群聊菜单抽屉 -->
		<view class="action-drawer" v-if="showGroupMenu" @click.self="showGroupMenu = false">
			<view class="action-drawer-panel" :class="{ 'drawer-show': showGroupMenu }">
				<view class="drawer-header">
					<text class="drawer-title">群聊管理</text>
					<view class="drawer-close" @click="showGroupMenu = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
					</view>
				</view>
				<view class="action-drawer-content">
					<view class="action-item" @click="showRoleManager">
						<my-icon name="user-group" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">管理群聊角色</text>
					</view>
					<view class="action-item" @click="clearHistory">
						<my-icon name="delete" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">清除聊天记录</text>
					</view>
					<view class="action-item cancel" @click="showGroupMenu = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">取消</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 角色管理模态框 -->
		<view class="edit-modal-mask" v-if="showRoleManagerModal" @click.self="showRoleManagerModal = false">
			<view class="edit-modal-container role-manager-modal" :class="{ 'modal-show': showRoleManagerModal }">
				<view class="modal-header">
					<text class="modal-title">管理群聊角色</text>
					<view class="modal-close" @click="showRoleManagerModal = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
					</view>
				</view>
				<view class="edit-modal-content">
					<view class="role-manager-section">
						<text class="section-title">当前群聊角色</text>
						<view class="role-list">
							<view v-for="role in groupChatRoles" :key="role.id" class="role-item-manager">
								<image class="role-avatar" :src="role.avatar" mode="aspectFill"></image>
								<text class="role-name">{{ role.name }}</text>
								<view class="role-action" @click="removeRoleFromChat(role.id)">
									<my-icon name="delete" width="32rpx" height="32rpx"
										color="var(--text-secondary-color)" />
								</view>
							</view>
							<view v-if="groupChatRoles.length === 0" class="empty-tip">
								<text>没有角色</text>
							</view>
						</view>
					</view>

					<view class="role-manager-section">
						<text class="section-title">可添加的角色</text>
						<view class="role-list">
							<view v-for="role in availableRoles" :key="role.id" class="role-item-manager">
								<image class="role-avatar" :src="role.avatar" mode="aspectFill"></image>
								<text class="role-name">{{ role.name }}</text>
								<view class="role-action" @click="addRoleToChat(role.id)">
									<my-icon name="add" width="32rpx" height="32rpx"
										color="var(--text-secondary-color)" />
								</view>
							</view>
							<view v-if="availableRoles.length === 0" class="empty-tip">
								<text>没有可添加的角色</text>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="edit-actions">
						<my-button @click="showRoleManagerModal = false" type="primary" size="mini" class="edit-btn">
							完成
						</my-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 消息列表区域 -->
		<view id="messageList" class="message-list" :class="{ 'immersive-message-list': showImmersiveBackground }" :style="messageListStyle">
			<view class="messages-container">
				<view class="message" v-for="(message, index) in messages" :key="message.id || index"
					:class="[message.type, { 'thinking': message.isThinking, 'immersive-message': showImmersiveBackground }]">
					<view class="message-content"
						:class="{ 'assistant-message': message.type === 'assistant', 'user-message': message.type === 'user', 'immersive-content': showImmersiveBackground }">
						<view v-if="message.type === 'assistant' && message.reasoning_content" class="reasoning-card"
							:class="{ expanded: message.isReasoningExpanded }">
							<view class="reasoning-header" @click="toggleReasoning(index)">
								<my-icon :name="message.isReasoningExpanded ? 'chevron-down' : 'chevron-right'"
									width="32rpx" height="32rpx" class="reasoning-icon" color="#ffffff" />
								<view class="reasoning-title">思考过程
									{{ message.isReasoningExpanded ? '(收起)' : '(展开)' }}</view>
							</view>
							<view class="reasoning-body" :class="{ collapsed: !message.isReasoningExpanded }">
								<view>{{ message.reasoning_content }}</view>
							</view>
						</view>
						<view class="answer-content">
							<text class="message-text">{{ message.content }}</text>
							<view v-if="message.isThinking" class="thinking-dots">
								<text>.</text>
								<text>.</text>
								<text>.</text>
							</view>
						</view>
					</view>
					<!-- 消息操作按钮 -->
					<view class="message-actions" v-if="!message.isThinking">
						<view class="action-buttons">
							<view class="action-btn copy" @click="handleCopyMessage(message)">
								<my-icon name="copy" width="32rpx" height="32rpx" color="#ffffff" />
							</view>
							<view class="action-btn edit" v-if="message.type === 'user'"
								@click="handleEditMessage(message)">
								<my-icon name="edit" width="32rpx" height="32rpx" color="#ffffff" />
							</view>
							<view class="action-btn delete" @click="handleDeleteMessage(message)">
								<my-icon name="delete" width="32rpx" height="32rpx" color="#ffffff" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 32rpx;"></view>
		</view>

		<!-- 操作抽屉 -->
		<view class="action-drawer" v-if="showActionDrawer" @click.self="showActionDrawer = false">
			<view class="action-drawer-panel" :class="{ 'drawer-show': showActionDrawer }">
				<view class="drawer-header">
					<text class="drawer-title">{{ actionDrawerTitle }}</text>
					<view class="drawer-close" @click="showActionDrawer = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
					</view>
				</view>
				<view class="action-drawer-content">
					<view class="action-item" @click="handleEditMessage"
						v-if="selectedMessage && selectedMessage.type === 'user'">
						<my-icon name="edit" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">编辑消息</text>
					</view>
					<view class="action-item" @click="handleCopyMessage">
						<my-icon name="copy" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">复制内容</text>
					</view>
					<view class="action-item delete" @click="handleDeleteMessage">
						<my-icon name="delete" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">删除消息</text>
					</view>
					<view class="action-item cancel" @click="showActionDrawer = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
						<text class="action-item-text">取消</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 编辑消息模态框 -->
		<view class="edit-modal-mask" v-if="showEditDrawer" @click.self="showEditDrawer = false">
			<view class="edit-modal-container" :class="{ 'modal-show': showEditDrawer }">
				<view class="modal-header">
					<text class="modal-title">编辑消息</text>
					<view class="modal-close" @click="showEditDrawer = false">
						<my-icon name="close" width="40rpx" height="40rpx" color="var(--text-secondary-color)" />
					</view>
				</view>
				<view class="edit-modal-content">
					<textarea :adjust-position='false' class="edit-textarea" v-model="editingContent"
						placeholder="请输入新的消息内容" :maxlength="-1" :auto-height="true" :cursor-spacing="20" />
				</view>
				<view class="modal-footer">
					<view class="edit-actions">
						<my-button @click="showEditDrawer = false" type="default" size="mini"
							class="edit-btn cancel-btn">取消</my-button>
						<my-button @click="confirmEditMessage" type="primary" size="mini" class="edit-btn"
							:disabled="!editingContent.trim() || editingContent.trim() === (selectedMessage && selectedMessage.content)">保存</my-button>
					</view>
				</view>
			</view>
		</view>

		<!-- iOS 18 风格输入区域 -->
		<view class="ios18-input-container" :class="{ 'immersive-input': showImmersiveBackground }">
			<!-- 高级角色选择器 -->
			<view class="adult-roles-selector">
				<scroll-view scroll-x="true" class="roles-scroll" show-scrollbar="false">
					<view class="roles-list">
						<view v-for="role in groupChatRoles" :key="role.id" class="role-item"
							:class="{ 'selected': isRoleSelected(role.id) }" @click="toggleRoleSelection(role.id)">
							<text class="role-name">{{ role.name }}</text>
							<text v-if="isRoleSelected(role.id)" class="role-order">{{ getRoleOrder(role.id) }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 未激活状态的输入提示区域 -->
			<view v-if="!isInputActive" class="input-wrapper" @click="activateInput">
				<view class="inactive-input-box">
					<text class="input-placeholder">输入消息...</text>
				</view>
				<view class="send-button-wrapper">
					<my-button disabled class="ios18-send-btn" type="primary" size="mini">
						<my-icon name="send" width="36rpx" height="36rpx" color="#000000" />
					</my-button>
				</view>
			</view>
			
			<!-- 激活状态的输入区域 -->
			<view v-if="isInputActive" class="input-wrapper active-input-wrapper" :style="inputContainerStyle" @touchstart.stop>
				<textarea :key="inputMessagekey" :auto-height="true" @input="handleInput" placeholder="输入消息..."
					confirm-type="send" @confirm="sendMessage" :rows="1" :maxrows="3" class="ios18-input-box" :adjust-position='false'
					:show-confirm-bar="false" :cursor-spacing="10" :auto-focus="true" @blur="handleInputBlur" />
				<view class="send-button-wrapper" :class="{ 'send-active': inputMessage.trim() }">
					<my-button @click="sendMessage" :disabled="isLoading || !inputMessage.trim()" class="ios18-send-btn"
						type="primary" size="mini">
						<my-icon name="send" width="36rpx" height="36rpx" color="#000000" />
					</my-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import roleManager from '@/store/role.js'
import modelManager from '@/store/model.js'
import settingsManager from '@/store/settings.js'
import groupChatManager from '@/store/group-chat.js'
import { MessageType } from '@/store/group-chat.js'
import Picshow from '@/components/picshow/picshow.vue'

export default {
	components: {
		Picshow
	},
	
	data() {
		return {
			roleId: '',
			roleName: '',
			roleAvatar: '',
			rolePrompt: '',
			inputMessage: '',
			inputMessagekey: 0,
			messages: [],
			isLoading: false,
			retryCount: 0,
			maxRetries: 3,
			statusBarHeight: 0,
			navbarHeight: 0,
			isAtBottom: true,
			showActionDrawer: false,
			selectedMessage: null,
			actionDrawerTitle: '消息操作',
			showEditDrawer: false,
			editingContent: '',
			modelManager,
			currentModelId: '',
			// 高级角色选择相关数据
			selectedRoles: [],
			adultRoles: [],
			// 群聊管理相关数据
			showGroupMenu: false,
			showRoleManagerModal: false,
			currentGroupId: '',
			groupChatRoles: [],
			availableRoles: [],
			// 双重输入框相关数据
			isInputActive: false,
			jianpanHeight: 0,
			sysInfo: uni.getSystemInfoSync(),
			// 沉浸模式相关
			showImmersiveBackground: false,
			// 样式相关
			containerStyle: {
				backgroundColor: 'rgb(18, 18, 20)'
			},
			messageListStyle: {
				backgroundColor: 'rgb(18, 18, 20)'
			},
		}
	},

	computed: {
		// 获取当前模型名称
		currentModelName() {
			const model = modelManager.models.find(m => m.id === this.currentModelId);
			return model ? model.name : '未知模型';
		},
		inputContainerStyle() {
			if (this.isInputActive) {
				return {
					position: 'fixed',
					bottom: `${this.jianpanHeight}px`,
					left: '16px',
					right: '16px',
					width: 'auto',
					zIndex: 101
				};
			}
			return {};
		}
	},

	watch: {
		// 监听模型变化
		'modelManager.currentModel': {
			handler(newModelId) {
				if (newModelId !== this.currentModelId) {
					this.currentModelId = newModelId;
					this.handleModelChanged();
				}
			},
			immediate: true
		}
	},

	onLoad(options) {
		// 获取状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		// 设置CSS变量
		// #ifdef H5
		document.documentElement.style.setProperty('--status-bar-height', `${this.statusBarHeight}px`);
		document.documentElement.style.setProperty('--navbar-height', `${this.statusBarHeight + 56}px`);
		// #endif

		// #ifndef H5
		// App环境下通过类名方式设置
		this.navbarHeight = this.statusBarHeight + 56;
		// #endif

		// 设置当前模型ID
		this.currentModelId = modelManager.currentModel;

		// 检查是否有群聊ID
		if (options.groupId) {
			console.log('[群聊] 加载群聊:', options.groupId);
			this.loadGroupChatInfo(options.groupId);
		}
		// 兼容旧版本，检查是否有角色ID列表
		else if (options.roles) {
			console.log('[群聊] 使用角色列表创建临时群聊');
			try {
				const roleIds = JSON.parse(options.roles);
				this.selectedRoles = roleIds;
				// 设置群聊名称
				this.roleName = "临时群聊";
				// 加载高级角色列表
				this.loadAdultRoles();
			} catch (e) {
				console.error('[群聊] 解析角色列表失败:', e);
				this.showErrorAndNavigateBack('无效的角色列表');
			}
		} else {
			console.error('[群聊] 未提供群聊ID或角色列表');
			this.showErrorAndNavigateBack('缺少必要参数');
		}

		// 在页面加载完成后滚动到底部
		this.$nextTick(() => {
			this.scrollToBottom(false);
		});

		// 添加SSE关闭事件监听
		uni.$on('sse-closed', this.handleSSEClosed);

		// 添加键盘高度变化监听
		uni.onKeyboardHeightChange(this.keyBodyHeightWatch);
		
		// 添加设置变更事件监听
		uni.$on('settingsChange', this.handleSettingsChange);
		
		// 检查是否开启沉浸模式
		this.checkImmersiveMode();
	},

	onUnload() {
		// 清理事件监听
		uni.$off('sse-closed', this.handleSSEClosed);
		// 移除键盘高度变化监听
		uni.offKeyboardHeightChange(this.keyBodyHeightWatch);

		// 保存群聊消息历史
		this.saveGroupChatHistory();
		
		// 清理事件监听
		uni.$off('settingsChange', this.handleSettingsChange);
	},

	onShow() {
		// 检查并更新当前模型信息
		if (this.currentModelId !== modelManager.currentModel) {
			this.currentModelId = modelManager.currentModel;
			this.handleModelChanged();
		}

		// 检查沉浸模式状态
		this.checkImmersiveMode();
	},

	methods: {
		// 显示错误并返回上一页
		showErrorAndNavigateBack(message) {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => uni.navigateBack(), 2000);
		},

		// 添加助手消息
		addAssistantMessage(content) {
			// 创建新消息对象
			const message = {
				id: Date.now().toString(36) + Math.random().toString(36).substr(2),
				type: MessageType.ASSISTANT,
				content: content,
				timestamp: Date.now()
			};

			this.messages.push(message);
			this.scrollToBottom();

			// 保存群聊消息历史
			this.saveGroupChatHistory();

			return message;
		},

		// 添加用户消息
		addUserMessage(content) {
			// 创建新消息对象
			const message = {
				id: Date.now().toString(36) + Math.random().toString(36).substr(2),
				type: MessageType.USER,
				content: content,
				timestamp: Date.now()
			};

			this.messages.push(message);
			this.scrollToBottom();

			// 保存群聊消息历史
			this.saveGroupChatHistory();

			return message;
		},

		// 添加思考中的助手消息
		addThinkingMessage() {
			// 创建新消息对象
			const message = {
				id: Date.now().toString(36) + Math.random().toString(36).substr(2),
				type: MessageType.ASSISTANT,
				content: '',
				isThinking: true,
				timestamp: Date.now()
			};

			this.messages.push(message);
			this.scrollToBottom();
			return message;
		},

		// 更新消息
		updateMessage(messageId, updates) {
			const index = this.messages.findIndex(msg => msg.id === messageId);
			if (index === -1) return null;

			// 更新本地消息
			const updatedMessage = {
				...this.messages[index],
				...updates
			};
			this.$set(this.messages, index, updatedMessage);

			// 如果消息不再是思考状态，保存群聊消息历史
			if (this.messages[index].isThinking && !updates.isThinking) {
				this.saveGroupChatHistory();
			}

			return updatedMessage;
		},

		// 删除消息
		removeMessage(messageId) {
			const index = this.messages.findIndex(msg => msg.id === messageId);
			if (index === -1) return false;

			// 从本地删除
			this.messages.splice(index, 1);

			// 保存群聊消息历史
			this.saveGroupChatHistory();

			return true;
		},

		// 查找最后一条用户消息
		findLastUserMessage() {
			for (let i = this.messages.length - 1; i >= 0; i--) {
				if (this.messages[i].type === MessageType.USER) {
					return this.messages[i];
				}
			}
			return null;
		},

		// 获取最后一条消息
		getLastMessage() {
			return this.messages.length > 0 ? this.messages[this.messages.length - 1] : null;
		},

		// 获取已完成的消息列表（用于发送给AI）
		getCompletedMessages() {
			// 准备API消息数组
			let apiMessages = [];

			// 过滤出已完成的消息并转换为API格式
			const conversationMessages = this.messages
				.filter(msg => !msg.isThinking && msg.content && msg.content.trim() !== '')
				.map(msg => ({
					role: msg.type === MessageType.USER ? 'user' : 'assistant',
					content: msg.content
				}));

			// 添加对话消息
			apiMessages = apiMessages.concat(conversationMessages);

			console.log('[消息处理] 总消息数量:', apiMessages.length);

			return apiMessages;
		},

		// 构建群聊系统提示
		buildGroupChatPrompt(role) {
			// 如果没有提供角色，返回默认提示
			if (!role) {
				return `你是一个对话助手，请根据用户的输入，生成自然、有趣的对话内容。`;
			}

			// 如果角色有prompt字段，直接使用
			if (role.prompt) {
				console.log(`[角色提示] 使用"${role.name}"的prompt`);
				// return role.prompt;
			}

			// 如果没有prompt字段，构建一个简单的提示
			let systemPrompt = `【角色扮演指令】
你现在是"${role.name}"，正在参与一个多人群聊对话。

【角色设定】
${role.prompt}

【对话规则】
1. 始终保持角色身份，不要跳出角色。
2. 仔细分析对话历史，判断用户是否在对你说话。
3. 如果用户直接提到你的名字或明确指向你，请积极回应。
4. 如果用户的问题是一般性的，且你认为应该由你回答，请自然地参与对话。
5. 回答时要符合你的角色性格、知识背景和语言风格。
6. 回答应当简洁、自然，像真实对话一样流畅。
7. 不要在回复中重复你的角色名，因为系统会自动添加。

【当前场景】
你正在与其他AI角色和用户进行群聊对话。请根据对话历史理解当前的对话场景和话题。`;

			console.log(`[角色提示] 为"${role.name}"生成简单提示`);
			return systemPrompt;
		},

		// 处理AI消息流式更新
		handleAIMessage(delta) {
			// 处理普通AI消息
			const currentMsg = this.getLastMessage();
			if (!currentMsg || currentMsg.type !== MessageType.ASSISTANT) return;

			let updates = {};

			// 更新推理内容
			if (delta.reasoning_content) {
				updates.reasoning_content = (currentMsg.reasoning_content || '') + delta.reasoning_content;
			}

			// 更新消息内容
			if (delta.content) {
				// 清理内容中的[DONE]标记，但不处理消息完成状态
				let cleanContent = delta.content.replace(/\[DONE\]/g, '');
				updates.content = (currentMsg.content || '') + cleanContent;
			}

			// 应用更新
			if (Object.keys(updates).length > 0) {
				this.updateMessage(currentMsg.id, updates);
				this.scrollToBottom(false);
			}
		},

		// 处理消息更新
		handleMessagesUpdated(messages) {
			// 处理普通消息更新
			if (messages.length > 0) {
				const lastMessage = messages[messages.length - 1];
				if (lastMessage.role === 'assistant' && lastMessage.content) {
					const currentMsg = this.getLastMessage();

					// 检查当前是否有思考中的助手消息
					if (currentMsg && currentMsg.type === MessageType.ASSISTANT && currentMsg.isThinking) {
						// 更新现有的思考消息
						this.updateMessage(currentMsg.id, {
							content: lastMessage.content,
							isThinking: false
						});
						console.log('[消息更新] 更新现有思考消息');
						this.scrollToBottom(true);
					} else if (currentMsg && currentMsg.type === MessageType.ASSISTANT && !currentMsg.isThinking) {
						// 如果最后一条消息是已完成的助手消息，检查内容是否需要更新
						if (currentMsg.content !== lastMessage.content) {
							this.updateMessage(currentMsg.id, {
								content: lastMessage.content
							});
							console.log('[消息更新] 更新现有助手消息内容');
							this.scrollToBottom(true);
						}
					} else {
						// 如果当前没有助手消息或最后一条不是助手消息，则创建一个新的
						console.log('[消息更新] 创建新的助手消息');
						this.addAssistantMessage(lastMessage.content);
						this.scrollToBottom(true);
					}
				}
			}
		},

		// 处理加载状态变化
		handleLoading(loading) {
			this.isLoading = loading;

			// 如果加载结束，隐藏加载提示
			if (!loading) {
				uni.hideLoading();
			}
		},

		// 切换推理内容的展开/折叠状态
		toggleReasoning(index) {
			if (this.messages[index]) {
				const isExpanded = !this.messages[index].isReasoningExpanded;
				this.updateMessage(this.messages[index].id, {
					isReasoningExpanded: isExpanded
				});
			}
		},

		// 处理SSE错误
		handleSSEError(err) {
			console.error('[SSE] 错误:', err);

			// 处理SSE关闭事件
			if (err?.type === 'SSE_CLOSED') {
				// 使用专门的处理方法
				this.handleSSEClosed();
				return;
			}

			// 处理组件错误
			if (err?.type === 'COMPONENT_ERROR') {
				console.error('[组件错误]', err.message);
				uni.hideLoading();
				uni.showToast({
					title: err.message || '组件错误',
					icon: 'none'
				});
				return;
			}

			// 隐藏加载提示
			uni.hideLoading();

			if (this.retryCount < this.maxRetries) {
				this.retryCount++;
				uni.showToast({
					title: `连接失败，正在重试(${this.retryCount}/${this.maxRetries})`,
					icon: 'none',
					duration: 2000
				});

				setTimeout(() => {
					const lastUserMessage = this.findLastUserMessage();
					if (lastUserMessage) {
						this.retryMessage(lastUserMessage.content);
					}
				}, 2000);
			} else {
				this.isLoading = false;
				this.retryCount = 0;

				const lastMessage = this.getLastMessage();
				if (lastMessage && (!lastMessage.content || lastMessage.content.trim() === '')) {
					this.removeMessage(lastMessage.id);
				}

				uni.showModal({
					title: '连接失败',
					content: '是否重新发送消息？',
					success: (res) => {
						if (res.confirm) {
							const lastUserMessage = this.findLastUserMessage();
							if (lastUserMessage) {
								this.retryCount = 0;
								this.retryMessage(lastUserMessage.content);
							}
						} else {
							this.isLoading = false;
							this.retryCount = 0;
						}
					}
				});
			}
		},

		// 重试发送消息
		async retryMessage(content) {
			if (this.isLoading) return;

			const lastMessage = this.getLastMessage();
			let aiMessage;

			if (lastMessage && lastMessage.type === MessageType.ASSISTANT) {
				// 更新现有AI消息
				aiMessage = this.updateMessage(lastMessage.id, {
					content: '',
					reasoning_content: '',
					isThinking: true,
					isReasoningExpanded: false
				});
			} else {
				// 创建新的AI消息
				aiMessage = this.addThinkingMessage();
			}

			// 获取历史消息
			const historyMessages = this.getCompletedMessages();
			console.log('[重试] 使用历史消息, 数量:', historyMessages.length);

			// 添加安全检查，确保aiChat组件存在
			if (this.$refs.aiChat) {
				// 处理多角色串联对话
				this.processMultiRoleChat(content, historyMessages);
			} else {
				console.error('[重试] AI聊天组件引用不可用');
				uni.showToast({
					title: '聊天组件未就绪',
					icon: 'none'
				});
				// 恢复消息状态
				if (aiMessage) {
					this.updateMessage(aiMessage.id, {
						isThinking: false
					});
				}
			}
		},

		// 滚动到底部
		scrollToBottom(withAnimation = true) {
			this.isAtBottom = true;

			setTimeout(() => {
				// #ifdef H5
				if (withAnimation) {
					window.scrollTo({
						top: document.body.scrollHeight,
						behavior: 'smooth'
					});
				} else {
					window.scrollTo(0, document.body.scrollHeight);
				}
				// #endif

				// #ifdef APP-PLUS || MP
				uni.pageScrollTo({
					scrollTop: 99999, // 使用一个足够大的值确保滚动到底部
					duration: withAnimation ? 300 : 0
				});
				// #endif
			}, 100);
		},

		// 处理滚动事件
		onScroll(e) {
			// #ifdef H5
			// 获取页面滚动信息
			const h5ScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			const windowHeight = window.innerHeight;
			const documentHeight = document.documentElement.scrollHeight;

			// 计算距离底部的距离
			const distanceFromBottom = documentHeight - (h5ScrollTop + windowHeight);
			this.isAtBottom = distanceFromBottom < 150;
			// #endif

			// #ifdef APP-PLUS || MP
			// App环境下使用事件对象获取滚动位置
			const appScrollTop = e.detail ? e.detail.scrollTop : 0;

			// 获取页面和容器的高度信息
			const query = uni.createSelectorQuery();
			query.select('.page-root').boundingClientRect().exec(pageRes => {
				if (!pageRes || !pageRes[0]) return;

				query.select('.messages-container').boundingClientRect().exec(containerRes => {
					if (!containerRes || !containerRes[0]) return;

					const pageHeight = pageRes[0].height;
					const contentHeight = containerRes[0].height;

					// 计算距离底部的距离
					const distanceFromBottom = contentHeight - (appScrollTop + pageHeight);
					this.isAtBottom = distanceFromBottom < 150;
				});
			});
			// #endif
		},

		// 处理多角色串联对话
		async processMultiRoleChat(userMsg, historyMessages) {
			// 获取选中的高级角色信息（已按选择顺序排序）
			const selectedRoles = this.getSelectedAdultRolesInfo();
			console.log('[多角色对话] 开始处理，选中角色数量:', selectedRoles.length);

			// 如果没有选中角色，使用默认提示
			if (!selectedRoles || selectedRoles.length === 0) {
				console.log('[多角色对话] 没有选中角色，使用默认提示');
				const thinkingMessage = this.addThinkingMessage();
				this.rolePrompt = this.buildGroupChatPrompt(null);
				const modelId = this.currentModelId || modelManager.currentModel;
				this.$refs.aiChat.sendMessage(userMsg, historyMessages, modelId);
				return;
			}

			// 记录角色处理顺序
			selectedRoles.forEach((role, index) => {
				console.log(`  ${index + 1}. ${role.name} (ID: ${role.id})`);
			});

			try {
				// 获取当前模型ID
				const modelId = this.currentModelId || modelManager.currentModel;
				console.log('[多角色对话] 使用模型:', modelId);

				let lastformattedResponse = ''
				let lastrolename = ''
				// 依次处理每个角色
				for (let i = 0; i < selectedRoles.length; i++) {
					const role = selectedRoles[i];
					console.log(`[多角色对话] 处理角色 ${i + 1}/${selectedRoles.length}: ${role.name}`);

					// 构建该角色的系统提示
					const rolePrompt = this.buildGroupChatPrompt(role);
					this.rolePrompt = rolePrompt;

					// 创建一个新的思考消息

					if (lastformattedResponse) {
						userMsg = ''
						historyMessages.push({
							role: 'assistant',
							content: lastformattedResponse
						})
						historyMessages.push({
							role: 'user',
							content: `${lastrolename}刚刚发言完毕。现在请你作为${role.name}，根据对话上下文和你的角色设定，自然地接入对话。请保持你的角色特点和语言风格。`
						})
					}

					const roleThinkingMessage = this.addThinkingMessage();


					// 发送消息并等待响应
					await new Promise(resolve => {
						this.$nextTick(() => {
							this.$refs.aiChat.sendMessage(userMsg, historyMessages, modelId);
							resolve();
						});
					});

					// 等待响应完成
					await this.waitForResponse(roleThinkingMessage.id, role.name);

					// 获取角色的回复并格式化
					const roleMessage = this.messages.find(m => m.id === roleThinkingMessage.id);
					if (roleMessage) {
						const formattedResponse = `${role.name}：${roleMessage.content || ''}`;
						lastformattedResponse = formattedResponse
						lastrolename += `${role.name}->`

						// 检查消息内容是否以角色名开头
						let messageContent = roleMessage.content || '';
						if (messageContent.startsWith(`${role.name}：`) || messageContent.startsWith(`${role.name}:`)) {
							// 如果以角色名开头，移除重复的角色名
							messageContent = messageContent.substring(role.name.length + 1).trim();
						}

						this.updateMessage(roleThinkingMessage.id, {
							content: `${role.name}：${messageContent}`,
							isThinking: false
						});
					} else {
						// 如果找不到消息，确保将思考状态设置为 false
						console.warn(`[多角色对话] 未找到角色 ${role.name} 的回复消息`);
						this.updateMessage(roleThinkingMessage.id, {
							isThinking: false
						});
					}

					// 重置AI聊天组件的状态
					this.isLoading = false;
				}

				// 恢复默认提示
				this.rolePrompt = this.buildGroupChatPrompt(null);

				// 滚动到底部
				this.scrollToBottom(true);
			} catch (error) {
				console.error('[多角色对话] 处理出错:', error);

				// 检查所有处于思考状态的消息
				const thinkingMessages = this.messages.filter(msg => msg.isThinking);
				if (thinkingMessages.length > 0) {
					console.log(`[多角色对话] 发现 ${thinkingMessages.length} 条处于思考状态的消息，将它们标记为完成`);
					thinkingMessages.forEach(msg => {
						this.updateMessage(msg.id, {
							isThinking: false,
							content: msg.content || '处理多角色对话时出错，请重试。'
						});
					});
				} else {
					// 如果没有找到思考中的消息，添加一个错误消息
					this.addAssistantMessage('处理多角色对话时出错，请重试。');
				}

				// 滚动到底部
				this.scrollToBottom(true);
			}
		},

		// 等待响应完成的辅助函数
		async waitForResponse(messageId, roleName) {
			return new Promise(resolve => {
				const checkInterval = setInterval(() => {
					// 检查消息是否已完成
					const msg = this.messages.find(m => m.id === messageId);
					if (!msg) {
						// 消息可能已被删除
						console.warn(`[多角色对话] 消息 ${messageId} 不存在，可能已被删除`);
						clearInterval(checkInterval);
						resolve();
						return;
					}

					if (!msg.isThinking) {
						clearInterval(checkInterval);
						console.log(`[多角色对话] 角色 ${roleName} 响应完成`);
						resolve();
					}
				}, 500);

				// 添加超时处理，30秒后自动结束
				setTimeout(() => {
					clearInterval(checkInterval);
					console.log(`[多角色对话] ${roleName} 响应超时`);

					// 如果消息仍在思考中，将其标记为完成
					const msg = this.messages.find(m => m.id === messageId);
					if (msg) {
						if (msg.isThinking) {
							this.updateMessage(msg.id, {
								isThinking: false,
								content: msg.content || `[${roleName}响应超时]`
							});
							console.log(`[多角色对话] 已将超时消息 ${messageId} 标记为完成`);
						}
					} else {
						console.warn(`[多角色对话] 超时处理时消息 ${messageId} 不存在`);
					}

					resolve();
				}, 30000);
			});
		},

		// 发送消息
		async sendMessage() {
			if (!this.inputMessage.trim() || this.isLoading) return;

			const userMsg = this.inputMessage.trim();
			this.inputMessage = '';
			this.inputMessagekey++;

			// 添加用户消息
			this.addUserMessage(userMsg);

			// 获取历史消息
			const historyMessages = this.getCompletedMessages();
			console.log('[发送] 使用历史消息, 数量:', historyMessages.length);

			// 处理多角色串联对话
			this.processMultiRoleChat(userMsg, historyMessages);
		},

		// 返回上一页
		goBack() {
			// #ifdef H5
			history.back();
			// #endif

			// #ifdef APP-PLUS || MP
			uni.navigateBack();
			// #endif
		},

		// 跳转到模型选择页面
		goToModelSelect() {
			uni.navigateTo({
				url: '/pages/model/select',
				events: {
					// 监听模型选择页面返回的事件
					modelSelected: (modelId) => {
						if (modelId && modelId !== this.currentModelId) {
							this.currentModelId = modelId;
							this.handleModelChanged();
						}
					}
				}
			});
		},

		// 清除聊天记录
		clearHistory() {
			uni.showModal({
				title: '确认清除',
				content: '确定要清除所有聊天记录吗？',
				success: res => {
					if (res.confirm) {
						// 清空消息列表
						this.messages = [];

						// 清除本地存储中的群聊历史
						const groupId = this.getCurrentGroupId();
						if (groupId) {
							groupChatManager.clearGroupChatHistory(groupId);
						}

						// 显示提示
						uni.showToast({
							title: '已清除聊天记录',
							icon: 'success'
						});
					}
				}
			});
		},

		// 处理编辑消息
		handleEditMessage(message) {
			// 设置当前选中的消息
			this.selectedMessage = message;

			// 设置编辑内容
			this.editingContent = message.content;

			// 显示编辑抽屉
			this.showEditDrawer = true;
		},

		// 确认编辑消息
		confirmEditMessage() {
			// 如果没有选中的消息，直接返回
			if (!this.selectedMessage) {
				this.showEditDrawer = false;
				return;
			}

			// 获取编辑后的内容
			const newContent = this.editingContent.trim();

			// 如果内容没有变化，不做任何操作
			if (newContent === this.selectedMessage.content) {
				this.showEditDrawer = false;
				return;
			}

			// 更新消息
			this.updateMessage(this.selectedMessage.id, {
				content: newContent
			});

			// 关闭编辑抽屉
			this.showEditDrawer = false;

			// 找到消息的正确索引（使用id查找）
			const msgIndex = this.messages.findIndex(msg => msg.id === this.selectedMessage.id);

			if (msgIndex !== -1) {
				// 删除该消息之后的所有消息
				const messagesToRemove = this.messages.slice(msgIndex + 1);
				messagesToRemove.forEach(msg => {
					this.removeMessage(msg.id);
				});

				// 重新发送消息生成回复
				this.retryMessage(newContent);
			}

			// 显示提示
			uni.showToast({
				title: '已更新消息',
				icon: 'success',
				duration: 1500
			});

			// 清理选中的消息
			this.selectedMessage = null;
			this.editingContent = '';
		},

		// 处理复制消息
		handleCopyMessage(message) {
			// 关闭抽屉
			this.showActionDrawer = false;

			// 复制消息内容
			uni.setClipboardData({
				data: message.content,
				success: () => {
					uni.showToast({
						title: '已复制到剪贴板',
						icon: 'success'
					});
				}
			});
		},

		// 处理删除消息
		handleDeleteMessage(message) {
			// 关闭抽屉
			this.showActionDrawer = false;

			// 确认删除
			this.confirmDeleteMessage(message);
		},

		// 确认删除消息
		confirmDeleteMessage(message) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条消息吗？',
				success: (res) => {
					if (res.confirm) {
						const msgIndex = this.messages.indexOf(message);

						// 删除消息
						this.removeMessage(message.id);

						// 如果删除的是用户消息，询问是否需要删除相关的AI回复
						if (message.type === MessageType.USER && msgIndex !== -1 && msgIndex < this
							.messages.length - 1) {
							// 检查下一条消息是否是AI回复
							const nextMsg = this.messages[msgIndex];
							if (nextMsg && nextMsg.type === MessageType.ASSISTANT) {
								uni.showModal({
									title: '删除相关回复',
									content: '是否同时删除AI的回复？',
									success: (res) => {
										if (res.confirm) {
											this.removeMessage(nextMsg.id);
										}
									}
								});
							}
						}
					}
				}
			});
		},

		// 查找最后一条用户消息的索引
		findLastUserMessageIndex() {
			for (let i = this.messages.length - 1; i >= 0; i--) {
				if (this.messages[i].type === MessageType.USER) {
					return i;
				}
			}
			return -1;
		},

		// 处理模型变化
		handleModelChanged() {
			// 显示模型切换提示
			uni.showToast({
				title: `已切换到${this.currentModelName}`,
				icon: 'none',
				duration: 1500
			});

			// 如果有需要，这里可以添加其他模型切换后的处理逻辑
			// 例如：重置对话状态、更新UI等
		},

		// 处理SSE关闭事件
		handleSSEClosed() {
			console.log('[SSE] 连接已关闭');
			this.isLoading = false;
			this.retryCount = 0;

			// 获取最后一条消息
			const lastMessage = this.getLastMessage();

			// 首先确保消息不再处于思考状态
			if (lastMessage) {
				// 如果是空消息且处于思考状态，则删除
				if (lastMessage.isThinking && (!lastMessage.content || lastMessage.content.trim() === '')) {
					console.log('[SSE] 删除空的思考消息');
					this.removeMessage(lastMessage.id);
				}
				// 如果消息有内容并且处于思考状态，则更新状态
				else if (lastMessage.isThinking) {
					console.log('[SSE] 更新消息状态为完成');
					this.updateMessage(lastMessage.id, {
						isThinking: false,
						isReasoningExpanded: true // 自动展开推理内容
					});

					// 发出消息更新事件，确保UI更新
					this.$emit('messages-updated', this.messages);

					// 滚动到底部
					this.scrollToBottom(true);
				}
				// 即使消息已经完成，也记录日志
				else {
					console.log('[SSE] 消息已经是完成状态');
				}
			}

			// 检查所有处于思考状态的消息
			const thinkingMessages = this.messages.filter(msg => msg.isThinking);
			if (thinkingMessages.length > 0) {
				console.log(`[SSE] 发现 ${thinkingMessages.length} 条处于思考状态的消息，将它们标记为完成`);
				thinkingMessages.forEach(msg => {
					this.updateMessage(msg.id, {
						isThinking: false,
						content: msg.content || '[响应中断]'
					});
				});

				// 发出消息更新事件，确保UI更新
				this.$emit('messages-updated', this.messages);

				// 滚动到底部
				this.scrollToBottom(true);
			}
		},

		// 处理输入事件
		handleInput(e) {
			this.inputMessage = e.detail.value;
		},

		// 激活输入框
		activateInput() {
			this.isInputActive = true;
		},

		// 处理输入框失焦
		handleInputBlur() {
			if (this.jianpanHeight === 0) {
				this.isInputActive = false;
			}
		},

		// 监听键盘高度变化
		keyBodyHeightWatch(e) {
			this.jianpanHeight = e.height;
			if (this.jianpanHeight === 0 && this.isInputActive) {
				this.isInputActive = false;
			}
		},

		// 处理页面触摸事件
		handlePageTouch(e) {
			// 如果输入框处于激活状态，点击页面任意位置将其关闭
			if (this.isInputActive) {
				this.isInputActive = false;
			}
		},

		// 加载高级角色列表
		loadAdultRoles() {
			// 直接使用roleManager的getAdultRolesSync方法获取高级角色
			try {
				const roles = roleManager.getAdultRolesSync();
				if (!roles || roles.length === 0) {
					console.warn('[高级角色] 警告：高级角色列表为空');
				} else {
					console.log('[高级角色] 成功加载高级角色列表，数量:', roles.length);
					// 打印每个角色的ID和名称，方便调试
					roles.forEach((role, index) => {
						console.log(`[高级角色] 角色${index + 1}: ID=${role.id}, 名称=${role.name}`);
					});
				}
				this.adultRoles = roles || [];
			} catch (error) {
				console.error('[高级角色] 加载高级角色列表失败:', error);
				this.adultRoles = [];
			}

			// 如果是群聊模式，使用群聊的角色列表
			if (this.currentGroupId) {
				console.log('[高级角色] 群聊模式，使用群聊角色列表');
				// 不从本地存储加载，而是使用群聊的角色列表
				const groupRoleIds = groupChatManager.getGroupChatRoleIds(this.currentGroupId);
				if (groupRoleIds && groupRoleIds.length > 0) {
					// 验证角色是否存在
					const validRoleIds = groupRoleIds.filter(roleId => {
						const role = roleManager.getRoleByIdSync(roleId);
						return !!role;
					});
					
					// 如果有角色已被删除，更新群聊角色列表
					if (validRoleIds.length < groupRoleIds.length) {
						console.log(`[高级角色] 检测到群聊中有已删除角色，更新群聊角色列表: ${groupRoleIds.length} -> ${validRoleIds.length}`);
						groupChatManager.setGroupChatRoleIds(this.currentGroupId, validRoleIds);
						this.selectedRoles = validRoleIds;
					} else {
						this.selectedRoles = groupRoleIds;
					}
					console.log('[高级角色] 使用群聊角色ID:', this.selectedRoles);
				} else if (this.adultRoles.length > 0) {
					// 如果群聊没有角色，但有可用角色，默认选中前两个
					this.selectedRoles = this.adultRoles.slice(0, 2).map(role => String(role.id));
					console.log('[高级角色] 群聊没有角色，默认选中前两个:', this.selectedRoles);
					// 更新群聊角色列表
					if (this.currentGroupId) {
						groupChatManager.setGroupChatRoleIds(this.currentGroupId, this.selectedRoles);
					}
				}
				return;
			}

			// 非群聊模式，从本地存储加载已选择的角色
			try {
				const savedSelection = uni.getStorageSync('SELECTED_ADULT_ROLES');
				if (savedSelection) {
					try {
						const parsedSelection = JSON.parse(savedSelection);
						if (Array.isArray(parsedSelection)) {
							this.selectedRoles = parsedSelection;
							console.log('[高级角色] 已选择的角色ID:', this.selectedRoles);

							// 验证选中的角色是否存在于角色列表中
							const validRoles = this.selectedRoles.filter(id =>
								this.adultRoles.some(role => String(role.id) === String(id))
							);

							if (validRoles.length !== this.selectedRoles.length) {
								console.warn('[高级角色] 警告：部分选中的角色ID在角色列表中不存在');
								console.log('[高级角色] 有效的角色ID:', validRoles);
								console.log('[高级角色] 无效的角色ID:',
									this.selectedRoles.filter(id => !validRoles.includes(id))
								);
								// 更新为有效的角色ID
								this.selectedRoles = validRoles;
								// 保存更新后的选择
								this.saveRoleSelection();
							}
						} else {
							console.error('[高级角色] 已保存的角色选择不是数组');
							this.selectedRoles = [];
						}
					} catch (parseError) {
						console.error('[高级角色] 解析已保存的角色选择失败:', parseError);
						this.selectedRoles = [];
					}
				} else {
					console.log('[高级角色] 没有已保存的角色选择');
					this.selectedRoles = [];
				}
			} catch (e) {
				console.error('[高级角色] 加载已选择角色失败:', e);
				this.selectedRoles = [];
			}

			// 如果没有选中任何角色，但有可用角色，默认选中第一个
			if (this.selectedRoles.length === 0 && this.adultRoles.length > 0) {
				const firstRoleId = String(this.adultRoles[0].id);
				console.log(`[高级角色] 没有选中角色，默认选中第一个角色: ${firstRoleId}`);
				this.selectedRoles = [firstRoleId]; // 数组形式保持顺序
				this.saveRoleSelection();
			}
		},

		// 检查角色是否被选中
		isRoleSelected(roleId) {
			// 确保roleId和selectedRoles中的ID类型一致（都是字符串或都是数字）
			const stringRoleId = String(roleId);
			const isSelected = this.selectedRoles.some(id => String(id) === stringRoleId);
			console.log(`[高级角色] 检查角色 ${roleId} 是否被选中:`, isSelected);
			return isSelected;
		},

		// 切换角色选择状态
		toggleRoleSelection(roleId) {
			// 确保roleId是字符串类型
			const stringRoleId = String(roleId);
			// 查找角色在selectedRoles中的索引
			const index = this.selectedRoles.findIndex(id => String(id) === stringRoleId);

			if (index === -1) {
				// 添加到选中列表末尾，保持选择顺序
				this.selectedRoles.push(stringRoleId);
				console.log(`[高级角色] 添加角色 ${roleId} 到选中列表，当前顺序:`, this.selectedRoles);
				// 显示选中提示
				uni.showToast({
					title: '已选择角色',
					icon: 'none',
					duration: 500
				});
			} else {
				// 检查是否至少保留一个角色
				if (this.selectedRoles.length <= 1) {
					uni.showToast({
						title: '群聊至少需要1个角色',
						icon: 'none',
						duration: 1500
					});
					return;
				}

				// 从选中列表移除
				this.selectedRoles.splice(index, 1);
				console.log(`[高级角色] 从选中列表移除角色 ${roleId}，当前顺序:`, this.selectedRoles);
				// 显示取消选中提示
				uni.showToast({
					title: '已取消选择',
					icon: 'none',
					duration: 500
				});
			}

			// 如果是群聊模式，更新群聊角色列表
			if (this.currentGroupId) {
				groupChatManager.setGroupChatRoleIds(this.currentGroupId, this.selectedRoles);
				console.log('[高级角色] 已更新群聊角色列表');
			} else {
				// 保存到本地存储
				this.saveRoleSelection();
			}
		},

		// 保存角色选择到本地存储
		saveRoleSelection() {
			try {
				uni.setStorageSync('SELECTED_ADULT_ROLES', JSON.stringify(this.selectedRoles));
			} catch (e) {
				console.error('保存角色选择失败:', e);
			}
		},

		// 获取选中的高级角色详细信息
		getSelectedAdultRolesInfo() {
			if (!this.selectedRoles || this.selectedRoles.length === 0) {
				console.log('[高级角色] 没有选中的角色');
				return [];
			}

			console.log('[高级角色] 当前选中的角色ID:', this.selectedRoles);
			console.log('[高级角色] 可用的高级角色列表:', this.adultRoles);

			// 确保adultRoles已加载
			if (!this.adultRoles || this.adultRoles.length === 0) {
				console.log('[高级角色] 高级角色列表为空，重新加载');
				this.adultRoles = roleManager.getAdultRolesSync();
			}

			// 按照选择顺序获取角色信息
			const selectedRoles = [];
			const validRoleIds = [];

			// 遍历selectedRoles数组，保持顺序
			for (const roleId of this.selectedRoles) {
				const role = this.adultRoles.find(r => String(r.id) === String(roleId));
				if (role) {
					selectedRoles.push(role);
					validRoleIds.push(roleId);
				} else {
					console.warn(`[高级角色] 警告：未找到ID为 ${roleId} 的角色`);
				}
			}

			// 如果有角色已被删除，更新selectedRoles
			if (validRoleIds.length < this.selectedRoles.length) {
				console.log(`[高级角色] 检测到已删除角色，更新选中角色列表: ${this.selectedRoles.length} -> ${validRoleIds.length}`);
				this.selectedRoles = validRoleIds;
				
				// 如果是群聊模式，更新群聊角色列表
				if (this.currentGroupId) {
					groupChatManager.setGroupChatRoleIds(this.currentGroupId, this.selectedRoles);
					console.log('[高级角色] 已更新群聊角色列表');
				} else {
					// 保存到本地存储
					this.saveRoleSelection();
				}
			}

			console.log('[高级角色] 选中的角色详细信息(按顺序):', selectedRoles);

			// 如果没有找到任何角色，可能是ID不匹配的问题
			if (selectedRoles.length === 0 && this.selectedRoles.length > 0) {
				console.warn('[高级角色] 警告：无法找到匹配的角色信息，可能是ID不匹配');
				// 尝试打印所有角色ID进行比较
				console.log('[高级角色] 所有角色ID:', this.adultRoles.map(r => String(r.id)));
				console.log('[高级角色] 选中的角色ID:', this.selectedRoles.map(id => String(id)));
			}

			return selectedRoles;
		},

		// 获取角色顺序
		getRoleOrder(roleId) {
			const index = this.selectedRoles.findIndex(id => String(id) === String(roleId));
			return index + 1;
		},

		// 加载群聊信息
		loadGroupChatInfo(groupId) {
			try {
				// 使用群聊管理模块获取群聊信息
				const groupChat = groupChatManager.getGroupChatById(groupId);

				if (!groupChat) {
					console.error('[群聊] 未找到群聊:', groupId);
					this.showErrorAndNavigateBack('未找到指定的群聊');
					return;
				}

				// 设置群聊名称
				this.roleName = groupChat.name || "群聊";

				// 设置当前群聊ID
				this.currentGroupId = groupId;

				// 设置选中的角色ID列表
				const roleIds = groupChat.roleIds || [];
				
				// 验证角色是否存在
				const validRoleIds = roleIds.filter(roleId => {
					const role = roleManager.getRoleByIdSync(roleId);
					return !!role;
				});
				
				// 如果有角色已被删除，更新群聊角色列表
				if (validRoleIds.length < roleIds.length) {
					console.log(`[群聊] 检测到群聊中有已删除角色，更新群聊角色列表: ${roleIds.length} -> ${validRoleIds.length}`);
					groupChatManager.setGroupChatRoleIds(groupId, validRoleIds);
					this.selectedRoles = validRoleIds;
				} else {
					this.selectedRoles = roleIds;
				}

				console.log('[群聊] 已加载群聊信息:', groupChat);
				console.log('[群聊] 角色ID列表:', this.selectedRoles);

				// 加载高级角色列表
				this.loadAdultRoles();

				// 加载群聊角色列表（用于输入框上方的角色选择器）
				this.loadGroupChatRoles();

				// 加载群聊消息历史
				this.loadGroupChatHistory(groupId);
			} catch (e) {
				console.error('[群聊] 加载群聊信息失败:', e);
				this.showErrorAndNavigateBack('加载群聊信息失败');
			}
		},

		// 加载群聊消息历史
		loadGroupChatHistory(groupId) {
			try {
				// 使用群聊管理模块获取群聊消息历史
				const chatHistory = groupChatManager.getGroupChatHistory(groupId);

				if (chatHistory.length > 0) {
					this.messages = chatHistory;
					console.log('[群聊] 已加载消息历史，数量:', chatHistory.length);
				} else {
					console.log('[群聊] 没有消息历史或为空');
					this.messages = [];
				}
			} catch (e) {
				console.error('[群聊] 加载消息历史失败:', e);
				this.messages = [];
			}
		},

		// 保存群聊消息历史
		saveGroupChatHistory(groupId) {
			try {
				// 获取当前URL中的groupId参数
				const currentGroupId = groupId || this.getCurrentGroupId();

				if (!currentGroupId) {
					console.error('[群聊] 保存消息历史失败: 未找到群聊ID');
					return;
				}

				// 使用群聊管理模块保存消息历史
				groupChatManager.saveGroupChatHistory(currentGroupId, this.messages);
			} catch (e) {
				console.error('[群聊] 保存消息历史失败:', e);
			}
		},

		// 从URL获取当前群聊ID
		getCurrentGroupId() {
			try {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const url = currentPage.route + currentPage.$page.fullPath;

				// 解析URL中的groupId参数
				const match = url.match(/groupId=([^&]+)/);
				return match ? match[1] : null;
			} catch (e) {
				console.error('[群聊] 获取当前群聊ID失败:', e);
				return null;
			}
		},

		// 显示群聊菜单
		showGroupChatMenu() {
			this.showGroupMenu = true;
		},

		// 显示角色管理器
		showRoleManager() {
			// 关闭群聊菜单
			this.showGroupMenu = false;

			// 获取当前群聊ID
			const groupId = this.getCurrentGroupId();
			if (!groupId) {
				uni.showToast({
					title: '无法获取群聊信息',
					icon: 'none'
				});
				return;
			}

			this.currentGroupId = groupId;

			// 加载群聊角色和可用角色
			this.loadGroupChatRoles();

			// 显示角色管理模态框
			this.showRoleManagerModal = true;
		},

		// 加载群聊角色和可用角色
		loadGroupChatRoles() {
			try {
				// 获取群聊中的角色详细信息
				this.groupChatRoles = groupChatManager.getGroupChatRoles(this.currentGroupId);
				
				// 获取群聊中的角色ID列表（可能已在getGroupChatRoles中更新）
				const roleIds = groupChatManager.getGroupChatRoleIds(this.currentGroupId);

				// 获取可添加的角色
				this.availableRoles = groupChatManager.getAvailableRolesForGroupChat(this.currentGroupId);

				// 同步更新selectedRoles，确保与群聊角色一致
				this.selectedRoles = roleIds;

				console.log('[群聊角色] 当前群聊角色数量:', this.groupChatRoles.length);
				console.log('[群聊角色] 可添加角色数量:', this.availableRoles.length);
			} catch (e) {
				console.error('[群聊角色] 加载群聊角色失败:', e);
				this.groupChatRoles = [];
				this.availableRoles = [];
			}
		},

		// 添加角色到群聊
		addRoleToChat(roleId) {
			try {
				// 添加角色到群聊
				const success = groupChatManager.addRoleToGroupChat(this.currentGroupId, roleId);

				if (success) {
					// 重新加载角色列表
					this.loadGroupChatRoles();

					// 更新选中的角色ID列表（用于聊天）
					this.selectedRoles = groupChatManager.getGroupChatRoleIds(this.currentGroupId);

					// 显示成功提示
					uni.showToast({
						title: '已添加角色',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '添加角色失败',
						icon: 'none'
					});
				}
			} catch (e) {
				console.error('[群聊角色] 添加角色失败:', e);
				uni.showToast({
					title: '添加角色失败',
					icon: 'none'
				});
			}
		},

		// 从群聊中移除角色
		removeRoleFromChat(roleId) {
			try {
				// 检查是否至少保留一个角色
				if (this.groupChatRoles.length <= 1) {
					uni.showToast({
						title: '群聊至少需要1个角色',
						icon: 'none'
					});
					return;
				}

				// 从群聊中移除角色
				const success = groupChatManager.removeRoleFromGroupChat(this.currentGroupId, roleId);

				if (success) {
					// 重新加载角色列表
					this.loadGroupChatRoles();

					// 从选中的角色列表中移除该角色
					const index = this.selectedRoles.findIndex(id => String(id) === String(roleId));
					if (index !== -1) {
						this.selectedRoles.splice(index, 1);
					}

					// 更新选中的角色ID列表（用于聊天）
					this.selectedRoles = groupChatManager.getGroupChatRoleIds(this.currentGroupId);

					// 显示成功提示
					uni.showToast({
						title: '已移除角色',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '移除角色失败',
						icon: 'none'
					});
				}
			} catch (e) {
				console.error('[群聊角色] 移除角色失败:', e);
				uni.showToast({
					title: '移除角色失败',
					icon: 'none'
				});
			}
		},

		// 检查是否开启沉浸模式
		async checkImmersiveMode() {
			// 添加更详细的日志输出
			console.log('[群聊页面] 检查沉浸模式状态:');
			console.log('[群聊页面] 登录状态:', settingsManager.isLoggedIn);
			console.log('[群聊页面] 高级设置解锁状态:', settingsManager.adultSettingUnlocked);
			console.log('[群聊页面] 沉浸模式设置值:', settingsManager._settings.immersiveMode);
			console.log('[群聊页面] 沉浸模式getter返回值:', settingsManager.immersiveMode);
			
			// 检查高级设置是否解锁
			if (!settingsManager.adultSettingUnlocked) {
				console.log('[群聊页面] 高级设置未解锁，无法开启沉浸模式');
				this.showImmersiveBackground = false;
				// 恢复原来的背景色
				this.containerStyle.backgroundColor = 'rgb(18, 18, 20)';
				this.messageListStyle.backgroundColor = 'rgb(18, 18, 20)';
				return;
			}
			
			// 检查是否开启沉浸模式
			if (settingsManager.immersiveMode) {
				console.log('[群聊页面] 沉浸模式已开启');
				this.showImmersiveBackground = true;
				
				// 设置透明背景
				this.containerStyle.backgroundColor = 'transparent';
				this.messageListStyle.backgroundColor = 'transparent';
			} else {
				console.log('[群聊页面] 沉浸模式未开启');
				this.showImmersiveBackground = false;
				// 恢复原来的背景色
				this.containerStyle.backgroundColor = 'rgb(18, 18, 20)';
				this.messageListStyle.backgroundColor = 'rgb(18, 18, 20)';
			}
		},
		
		// 处理设置变更事件
		handleSettingsChange(event) {
			// 如果是沉浸模式或高级设置解锁状态变更，重新检查沉浸模式
			if (event.type === 'immersiveMode' || event.type === 'adultSettingUnlocked') {
				console.log('[群聊页面] 设置变更:', event.type, event.value);
				this.checkImmersiveMode();
			}
		},
	}
}
</script>

<style>
:root {
	--primary-color-rgb: 212, 165, 32;
	--text-color-rgb: 255, 255, 255;
	--border-color-rgb: 255, 255, 255;
	--card-bg-color-rgb: 44, 44, 46;
	--bg-color-rgb: 18, 18, 20;
	--nav-bg-color: rgba(18, 18, 20, 0.9);
	--text-on-primary-color: #000000;
	--text-secondary-color: #86868b;
	--card-bg-color: #2c2c2e;
	--border-color: rgba(255, 255, 255, 0.1);
	--input-bg-color: #3a3a3c;
}

/* 沉浸模式相关样式 */
.chat-container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background-color: transparent; /* 当开启沉浸模式时应该是透明的 */
	overflow-y: auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
	color: #ffffff;
}

/* 沉浸模式下的导航栏样式 */
.ios18-navbar.immersive-navbar {
	background-color: transparent;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-bottom: none;
	box-shadow: none;
}

/* 沉浸模式下的按钮样式 */
.nav-button.immersive-button {
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* 沉浸模式下的选择器样式 */
.role-model-selector.immersive-selector {
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	padding: 8px 16px;
}

/* 沉浸模式下的消息列表样式 */
.immersive-message-list {
	padding: 16rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
}

/* 沉浸模式下的消息列表遮罩 */
.chat-container.immersive-background .message-list {
	position: relative;
}

.chat-container.immersive-background .message-list::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70vh;
	background: linear-gradient(to bottom, 
		rgba(18, 18, 20, 0) 0%,
		rgba(18, 18, 20, 0.8) 50%,
		rgba(18, 18, 20, 1) 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* 沉浸模式下的消息列表容器 */
.chat-container.immersive-background .messages-container {
	position: relative;
	z-index: 3;
}

/* 沉浸模式下的消息样式 */
.message.immersive-message {
	margin-bottom: 0;
	width: 100%;
}

.message.immersive-message .message-content {
	max-width: 90%;
	margin: 0 auto;
}

/* 沉浸模式下的消息内容样式 */
.message-content.immersive-content {
	background-color: rgba(41, 42, 46, 0.4);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.message.assistant .message-content.immersive-content {
	border-radius: 16px;
	padding: 20rpx 40rpx;
}

.user-message.immersive-content {
	background-color: rgba(212, 165, 32, 0.6);
}

/* 沉浸模式下的输入容器样式 */
.ios18-input-container.immersive-input {
	background-color: rgba(18, 18, 20, 0.4);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-top: none;
	box-shadow: none;
	padding: 12px;
}

/* 沉浸模式下的输入框包装器样式 */
.input-wrapper.immersive-wrapper {
	background-color: rgba(58, 58, 60, 0.5);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 激活状态的输入框包装器样式 */
.active-input-wrapper.immersive-wrapper {
	background-color: rgba(58, 58, 60, 0.5);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* iOS 18 风格导航栏 */
.ios18-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 100;
	border-bottom: 0.5rpx solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.navbar-content {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px;
}

.navbar-left,
.navbar-right {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.nav-button:active {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(0.95);
}

.navbar-center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.role-model-selector {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 16px;
	transition: background-color 0.2s ease;
}

.role-model-selector:active {
	background-color: rgba(255, 255, 255, 0.05);
}

.role-name {
	font-size: 18px;
	color: #ffffff;
	font-weight: 600;
	margin-right: 8px;
}

.model-name {
	font-size: 14px;
	color: #86868b;
	font-weight: 500;
}

/* 消息列表区域 */
.message-list {
	position: relative;
	width: 100%;
	margin-top: var(--navbar-height, 76px);
	margin-bottom: 120rpx;
	padding: 16rpx 32rpx;
	background-color: transparent;
	z-index: 1;
	padding-bottom: 160rpx; /* 确保底部有足够空间 */
	transition: all 0.3s ease;
}

/* 消息容器 */
.messages-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 16rpx;
}

.message {
	display: flex;
	flex-direction: column;
	margin-bottom: 16rpx;
}

.message.user {
	align-items: flex-end;
}

.message.assistant {
	align-items: stretch;
	margin: 0 -16px;
}

.assistant-message {
	width: 100%;
	max-width: 100%;
	color: #ffffff;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.user-message {
	max-width: 75%;
	background-color: rgba(212, 165, 32, 0.9);
	color: #000000;
	border-top-right-radius: 4rpx;
	border-radius: 20rpx;
	box-shadow: 0 2px 8px rgba(212, 165, 32, 0.3);
}

.message-content {
	border-radius: 20rpx;
	padding: 16rpx 24rpx;
	word-break: break-word;
	position: relative;
	transition: opacity 0.2s, transform 0.2s;
}

.message.assistant .message-content {
	border-radius: 0;
}

.message.assistant .message-actions {
	padding: 0 40rpx;
}

.reasoning-card {
	border-radius: 12px;
	margin: 0 0 4px 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(58, 58, 60, 0.5);
	margin-bottom: -48rpx;
}

.reasoning-header {
	padding: 6px 12px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.reasoning-icon {
	transition: transform 0.3s;
}

.reasoning-title {
	font-size: 14px;
	color: #ffffff;
	font-weight: 500;
}

.reasoning-body {
	padding: 0 12px 6px;
	font-size: 14px;
	color: #86868b;
	transition: max-height 0.3s;
}

.collapsed {
	max-height: 0;
	padding: 0 12px;
	overflow: hidden;
}

.expanded .reasoning-body {
	max-height: 1000px;
}

.answer-content {
	margin-top: 4px;
}

/* 思考动画 */
.thinking .message-content {
	position: relative;
}

.thinking-dots {
	display: flex;
	padding: 5px 0;
}

.thinking-dots text {
	font-size: 24px;
	line-height: 1;
	animation: thinking-animation 1.4s infinite;
	margin-right: 2px;
}

.thinking-dots text:nth-child(2) {
	animation-delay: 0.2s;
}

.thinking-dots text:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes thinking-animation {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.3;
	}

	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

.thinking .assistant-message {
	opacity: 0.7;
}

/* 消息操作按钮样式 */
.message-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
	padding: 0 4px;
	opacity: 0.85;
}

.message.user .message-actions {
	justify-content: flex-end;
}

.message.assistant .message-actions {
	justify-content: flex-start;
}

.action-buttons {
	display: flex;
	gap: 8px;
	height: 28px;
}

.action-btn {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.05);
	box-shadow: none;
	transition: all 0.2s ease;
}

.action-btn:active {
	transform: scale(0.92);
	opacity: 0.6;
	background-color: rgba(255, 255, 255, 0.1);
}

/* iOS 18 风格输入区域 */
.ios18-input-container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
	background-color: rgba(18, 18, 20, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	z-index: 100;
	box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.3);
	/* #ifdef APP-PLUS */
	padding-bottom: calc(16px + constant(safe-area-inset-bottom));
	padding-bottom: calc(16px + env(safe-area-inset-bottom));
	/* #endif */
	transition: all 0.3s ease;
}

.input-wrapper {
	display: flex;
	align-items: flex-end;
	width: 100%;
	background-color: rgba(58, 58, 60, 0.9);
	border-radius: 24px;
	padding: 8px 8px 8px 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

/* 未激活状态的输入框样式 */
.inactive-input-box {
	flex: 1;
	min-height: 36px;
	font-size: 16px;
	line-height: 20px;
	color: #86868b;
	display: flex;
	align-items: center;
}

.input-placeholder {
	color: #86868b;
}

.ios18-input-box {
	flex: 1;
	max-height: 120px;
	font-size: 16px;
	line-height: 20px;
	color: #ffffff;
	background-color: transparent;
	padding: 8px 0;
}

/* 添加输入框占位符文本颜色样式 */
.ios18-input-box::placeholder {
	color: #86868b;
}

/* 激活状态的输入框包装器样式 */
.active-input-wrapper {
	position: fixed;
	z-index: 101;
	background-color: rgba(58, 58, 60, 0.9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	left: 16px;
	right: 16px;
	width: auto;
	transition: all 0.3s ease;
}

.send-button-wrapper {
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.send-active {
	transform: scale(1.05);
}

.ios18-send-btn {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.send-button-wrapper.send-active .ios18-send-btn {
	transform: scale(1.05);
}

/* 操作抽屉样式 */
.action-drawer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.action-drawer-panel {
	background-color: #2c2c2e;
	border-radius: 32rpx 32rpx 0 0;
	padding: 24rpx 0;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.3);
}

.drawer-show {
	transform: translateY(0);
}

.drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 16rpx;
}

.drawer-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

.drawer-close {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 32rpx;
	background-color: rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.drawer-close:active {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(0.95);
}

.action-drawer-content {
	padding: 8rpx 16rpx;
}

.action-item {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx;
	margin: 8rpx 16rpx;
	border-radius: 20rpx;
	background-color: #3a3a3c;
	transition: all 0.2s ease;
}

.action-item:active {
	background-color: rgba(255, 255, 255, 0.05);
	transform: scale(0.98);
}

.action-item.delete {
	color: #ff453a;
}

.action-item.delete my-icon {
	color: #ff453a;
}

.action-item.cancel {
	margin-top: 24rpx;
	background-color: rgba(255, 255, 255, 0.05);
}

.action-item-text {
	margin-left: 24rpx;
	font-size: 32rpx;
	color: #ffffff;
}

.action-item.delete .action-item-text {
	color: #ff453a;
}

/* 编辑模态框样式 */
.edit-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-modal-container {
	width: 90%;
	background-color: #2c2c2e;
	border-radius: 24rpx;
	transform: scale(0.9);
	opacity: 0;
	transition: all 0.3s ease-out;
}

.modal-show {
	transform: scale(1);
	opacity: 1;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
}

.modal-close {
	padding: 16rpx;
	margin: -16rpx;
}

.modal-footer {
	padding: 24rpx 32rpx;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-modal-content {
	padding: 32rpx;
}

.edit-textarea {
	width: 100%;
	min-height: 240rpx;
	background-color: #3a3a3c;
	border-radius: 16rpx;
	padding: 24rpx;
	font-size: 28rpx;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-textarea::placeholder {
	color: #86868b;
}

.edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 24rpx;
}

.edit-btn {
	min-width: 160rpx;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 500;
	padding: 0 40rpx;
}

.cancel-btn {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 高级角色选择器样式 */
.adult-roles-selector {
	margin-bottom: 10px;
	background-color: #3a3a3c;
	border-radius: 16px;
	padding: 8px;
	width: 100%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.roles-scroll {
	width: 100%;
	white-space: nowrap;
}

.roles-list {
	display: inline-flex;
	padding: 4px;
	gap: 8px;
}

.role-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background-color: #2c2c2e;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
	position: relative;
}

.role-item:active {
	transform: scale(0.95);
}

.role-item.selected {
	background-color: rgb(212, 165, 32);
	border-color: rgb(212, 165, 32);
	box-shadow: 0 2px 6px rgba(212, 165, 32, 0.3);
	transform: translateY(-1px);
	padding-right: 24px;
}

.role-item.selected:active {
	transform: scale(0.95) translateY(-1px);
}

.role-item.selected .role-name {
	color: #000000;
}

.role-name {
	font-size: 14px;
	color: #ffffff;
}

.role-order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	margin-left: 6px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}

/* 角色管理模态框样式 */
.role-manager-modal {
	max-height: 80vh;
	overflow-y: auto;
}

.role-manager-section {
	margin-bottom: 24rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 16rpx;
}

.role-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.role-item-manager {
	display: flex;
	align-items: center;
	padding: 16rpx;
	background-color: #3a3a3c;
	border-radius: 16rpx;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	margin-right: 16rpx;
}

.role-name {
	flex: 1;
	font-size: 28rpx;
	color: #ffffff;
}

.role-action {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 32rpx;
	background-color: rgba(255, 255, 255, 0.05);
}

.role-action:active {
	background-color: rgba(255, 255, 255, 0.1);
}

.empty-tip {
	padding: 32rpx;
	text-align: center;
	color: #86868b;
	font-size: 28rpx;
}
</style>